<script setup>
import {nextTick, ref} from "vue";
import utils from '@/utils/storage'
import CodeMirror from "@/components/codeMirror.vue";
import "vue3-video-play/dist/style.css";
import {videoPlay as Vue3VideoPlay} from "vue3-video-play";
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import local from "@/axios/local";
import {ElMessage} from "element-plus"; // 改个别名
const fileItem = ref(null)
const visible = ref(false)
const fileType = ref('')
const argsObj = ref()

async function saveText(data) {
  await local.post('/ssh/saveFileText', {data, ...argsObj.value})
  ElMessage.success('修改成功')
}

function show(data, args) {
  argsObj.value = args
  fileItem.value = JSON.parse(JSON.stringify(data))
  if (data.type.includes('text')) {
    fileType.value = 'text'
  } else if (data.type.includes('image')) {
    fileType.value = 'image'
  } else if (data.type.includes('Media')) {
    fileType.value = 'video'
    fileItem.value.path = `http://localhost:7071/ssh/returnVideoStream?sftp_uuid=${args.sftp_uuid}&filePath=${args.filePath}`
    nextTick(() => {
      const player = new Player({
        id: 'video-player',
        volume: 0.3,
        url: fileItem.value.path,
        poster: "",
        playsinline: false,
        danmu: {
          area: {
            start: 0,
            end: 1
          }
        }
      });
      console.log(player)
    })

  } else {
    fileType.value = 'other'
  }
  visible.value = true
}

defineExpose({
  show
})
</script>

<template>
  <div>
    <el-dialog draggable v-model="visible" width="80%" :close-on-press-escape="false" title="文件预览">
      <div v-if="fileItem" class="preview">
        <div v-if="fileType==='image'" class="file">
          <img :src="fileItem.text" alt="">
        </div>
        <div v-else-if="fileType==='video'" class="file">
          <div id="video-player"></div>
        </div>
        <div v-if="fileType==='text'" class="file-text">
          <code-mirror @save="saveText" :readOnly="false" :data="fileItem.text"></code-mirror>
        </div>
        <div v-if="fileType==='other'" class="file">
          <span>不支持预览</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
#video-player {
  width: 100% !important;
  height: 100% !important;
}

.preview {
  height: 60vh;
  overflow-y: hidden;

  .file-text {
    height: 100%;
    overflow: hidden;
  }

  .file {
    height: 100%;
    overflow-y: auto;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }
}
</style>
